import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { List } from 'tea-component';
import { ListItemTitle, ListItemContent } from '@src/components/common-compinents';
import * as actionTypes from '@src/model/actionType';
import { useHistory } from 'react-router-dom';

export function ContractList(props) {
  const history = useHistory();
  // @ts-ignore
  const homeStore = useSelector((state) => state.homeReducer);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({ type: actionTypes.fetchLatestContract });
  }, [dispatch]);

  return (
    <div style={{ width: '495px', padding: '17px 21px', backgroundColor: '#ffffff', boxSizing: 'border-box' }}>
      <h6
        style={{
          fontSize: '14px',
          fontFamily: 'MicrosoftYaHei-Bold',
          color: '#333333',
        }}
      >
        最新合约上链统计
      </h6>
      <List split="divide" style={{ height: '350px', overflow: 'auto' }}>
        <ListItemTitle name="合约名称" time="创建时间"></ListItemTitle>
        {homeStore.latestContract.GroupList.map((value, index) => {
          return <ListItemContent name={value.ContractName} Timestamp={value.Timestamp} key={index}></ListItemContent>;
        })}
      </List>
    </div>
  );
}
